<template>
  <div class="timeLineBox">
    <div v-if="fujianList.length > 0" class="fujianShenCha">
      <div class="fujianList">
        <div class="bgFujian" v-for="(item, index) in fujianList" :key="index">
          <div class="fujianTitle">
            {{ index + 1 }}.{{
            item.fileName}}
          </div>
          <div class="fujianContent">
            <div class="fujianName">
              <i class="el-icon-document icon"></i>
              <el-tooltip class="item" effect="dark" :content="item.fileName" placement="top-start">
                <p class="fujianNamePdf">{{ item.fileName }}</p>
              </el-tooltip>
            </div>
            <div class="isHover">
              <span @click="chaKanItem(item)">
                {{
                item.opinionStatusNew == "AUDIT"
                ? "审查"
                : item.opinionStatusNew == "VIEW"
                ? "查看"
                : "审查"
                }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="chaKanBox" v-if="showChaKan">
        <div class="showDetail">
          <div class="chaKanBox_left" v-loading="loadingIframe">
            <iframe
              :src="mainPath + itemData.filePath"
              frameborder="0"
              id="wode1"
              style="width:100%;height:100%;"
            ></iframe>
          </div>
          <div class="chaKanBox_right" v-loading="adviceListLoading">
            <div class="chaKanBox_right_header">
              <div class="title">{{ attachName }}</div>
              <div class="export" v-if="!isLook">
                <el-button
                  class="add"
                  type="primary"
                  size="mini"
                  @click="handelCheckSuccess"
                  v-if="adviceList.length == 0"
                >审查通过</el-button>
                <el-button class="add" type="primary" size="mini" @click="addadvice">新增</el-button>
              </div>
            </div>
            <div class="chaKanBox_right_adviceList" v-if="!showadd">
              <div
                class="chaKanBox_right_adviceList_item"
                v-for="(item, index) in adviceList"
                :key="index"
              >
                <div class="situation">
                  <div class="msg" style="margin-top:0;">附件名称：{{ item.attachmentName }}</div>
                  <div class="msg">问题描述：{{ item.content }}</div>
                  <div class="msg">修改情况：{{ item.status | statusType }}</div>
                  <div class="msg">审查时间：{{ item.updateTime || item.createTime }}</div>
                </div>
                <div class="other" v-if="!isLook">
                  <!-- <div class="date">2018/10/03</div> -->
                  <div style="display: flex; align-items: center;">
                    <el-button type="text" @click="changeOne(item.id)" v-if="item.status != 4">修改情况</el-button>
                    <div class="delete" @click="deleteOne(item.id)">删除</div>
                  </div>
                </div>
              </div>
              <div v-if="adviceList.length == 0" style="padding-top:50px;text-align:center">暂无数据！</div>
            </div>
            <!-- 添加审查意见 -->
            <el-form v-if="showadd" label-width="80px" style="margin-top:30px;">
              <el-form-item label="附件名称" prop="attachmentFileId">
                <el-input :readonly="true" v-model="fileName" placeholder="请输入内容"></el-input>
                <!-- <el-select placeholder="请选择" v-model="form.attachmentFileId">
                  <el-option
                    :label="file.fileName | handleSuffix"
                    :value="file.fileId"
                  ></el-option>
                </el-select>-->
              </el-form-item>
              <el-form-item label="问题描述">
                <el-input type="textarea" v-model="content" rows="4"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="showadd = false">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-data">- 暂无数据 -</div>
    <!-- 修改情况弹窗 -->
    <el-dialog :close-on-click-modal="false" title="修改情况" :visible.sync="dialogVisible" width="30%">
      <div class="content">
        <el-radio-group style="margin-right: 20px;" v-model="changeTypeOne.status">
          <el-radio :label="3">已修改</el-radio>
          <el-radio :label="2">未修改</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeAdviceOne">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  attachmentListForTwo,
  attachmentListForTwoAdd,
  attachmentListForTwoEdit,
  attachmentListForTwoDel
} from '@/api/common'
export default {
  name: 'fujianList',
  props: ['fujianList', 'cuowuList', 'isLook', 'linkValue'],
  data() {
    return {
      attachName: '审查意见',
      showChaKan: false,
      yijianValue: '',
      yijianContent: '',
      isText: false,
      fullscreenLoading: false,
      itemData: '',
      attachmentType: '',
      attachmentFileId: '',
      fileName: '',
      adviceList: [],
      dialogVisible: false,
      changeTypeOne: {
        status: 3, //修改意见状态
        attachmentId: '' //修改意见ID
      },
      showadd: false,
      content: '',
      mainPath: '', //主要显示
      loadingIframe: false,
      itemDataFilePath: '', //pdf或者dwg路径
      adviceListLoading: false
    }
  },

  watch: {
    itemDataFilePath(val) {
      var that = this
      this.loadingIframe = true
      this.$nextTick(() => {
        var downFrame = document.getElementById('wode1')
        downFrame.onload = function(e) {
          that.loadingIframe = false
        }
      })
    }
  },
  mounted() {},
  methods: {
    deleteOne(id) {
      this.$confirm('是否删除该条意见?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var data = {
            id: id
          }
          let loadingInstance = this.$loading(this.$loadingData)
          attachmentListForTwoDel(data)
            .then(res => {
              this.$parent.getFujian()
              loadingInstance.close()
              this.attachmentListForTwoData()
            })
            .catch(() => {
              loadingInstance.close()
            })
        })
        .catch(() => {})
    },
    changeAdviceOne() {
      //修改情况（单个）
      var data = {
        status: this.changeTypeOne.status,
        attachmentId: this.changeTypeOne.attachmentId,
        projectId: localStorage.getItem('projectId')
        // linkValue:this.linkValue,
        // attachmentType:this.attachmentType,
        // attachmentFileId:this.attachmentFileId,
      }
      let loadingInstance = this.$loading(this.$loadingData)
      attachmentListForTwoEdit(data)
        .then(res => {
          loadingInstance.close()
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
          this.dialogVisible = false
          this.attachmentListForTwoData()
        })
        .catch(res => {
          loadingInstance.close()
        })
    },
    //添加一条数据
    onSubmit() {
      var data = {
        projectId: localStorage.getItem('projectId'),
        linkValue: this.linkValue,
        attachmentType: this.attachmentType,
        attachmentFileId: this.attachmentFileId,
        attachmentName: this.fileName,
        content: this.content,
        status: 1
      }
      let loadingInstance = this.$loading(this.$loadingData)
      attachmentListForTwoAdd(data)
        .then(res => {
          loadingInstance.close()
          this.$message({
            message: '提交成功！',
            type: 'success'
          })
          this.showadd = false
          this.attachmentListForTwoData()
          this.$parent.getFujian()
        })
        .catch(err => {
          loadingInstance.close()
        })
    },
    //一键审核通过
    handelCheckSuccess: function() {
      //提交新增审查意见
      let loadingInstance = this.$loading(this.$loadingData)
      let params = {
        projectId: localStorage.getItem('projectId'),
        linkValue: this.linkValue,
        attachmentFileId: this.attachmentFileId,
        attachmentType: this.attachmentType,
        attachmentName: this.fileName,
        status: 4,
        content: '无问题'
      }
      attachmentListForTwoAdd(params)
        .then(res => {
          loadingInstance.close()
          this.$message({
            message: '提交成功！',
            type: 'success'
          })
          this.showadd = false
          this.attachmentListForTwoData()
          this.$parent.getFujian()
        })
        .catch(res => {
          loadingInstance.close()
        })
    },
    //打开新增意见
    addadvice() {
      this.content = ''
      this.showadd = true
    },
    changeOne(id) {
      //单个修改情况
      this.changeTypeOne.attachmentId = id
      this.changeTypeOne.status = 3
      this.dialogVisible = true
    },
    //获取意见类型
    attachmentListForTwoData() {
      this.adviceListLoading = true
      var data = {
        projectId: localStorage.getItem('projectId'),
        linkValue: this.linkValue,
        attachmentType: this.attachmentType
      }
      attachmentListForTwo(data).then(res => {
        this.adviceListLoading = false
        this.adviceList = res.data
      })
    },
    //提交
    submitData() {
      var data = {
        yijianValue: this.yijianValue,
        yijianContent: this.yijianContent
      }
      this.$emit('submitFujian', data, this.itemData)
    },
    //关闭加载
    shotDownLoading() {
      this.fullscreenLoading = false
    },
    //关闭加载
    openLoading() {
      this.fullscreenLoading = false
    },
    //关闭查看
    shotDownShowChaKan() {
      this.showChaKan = false
    },
    changeText(v) {
      if (v == 'NO_PROBLEM') {
        this.isText = false
      } else {
        this.isText = true
      }
    },
    //查看附件
    chaKanItem(item) {
      var that = this
      console.log(this.isLook, item)
      if (
        item.filePath.substring(
          item.filePath.indexOf('.') + 1,
          item.filePath.length
        ) == 'dwg' ||
        item.filePath.substring(
          item.filePath.indexOf('.') + 1,
          item.filePath.length
        ) == 'DWG'
      ) {
        this.mainPath = this.$httpsCad + '/?url=' + this.$https
      } else {
        this.mainPath = this.$https
      }
      this.attachmentType = item.fileType
      this.attachmentFileId = item.id || item.fileId
      this.fileName = item.fileName
      this.itemData = item
      this.itemDataFilePath = item.filePath
      if (item.opinionStatusNew == 'VIEW') {
        this.yijianValue = item.opinionType
        this.yijianContent = item.opinion
        if (this.yijianValue == 'NO_PROBLEM') {
          this.isText = false
        } else {
          this.isText = true
        }
      } else {
        this.yijianContent = ''
        this.yijianValue = ''
        this.isText = true
      }
      this.showChaKan = true

      this.attachmentListForTwoData()
    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}

.fujianShenCha {
  overflow: auto;
}

.fujianList {
  margin-top: 30px;
  float: left;
  width: 25%;
  box-sizing: border-box;
  margin-right: 3%;
}

.chaKanBox {
  float: left;
  width: 70%;
  box-sizing: border-box;
}

.fujianList_item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-left: 30px;
}

.fujianList_item p {
  width: 300px;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: #444;
}

.dachuShenChaBox {
  position: relative;
}

.dachuShenCha {
  position: absolute;
  right: 0;
  top: 4px;
  display: flex;
}

.dachuShenCha .dachuShenCha_item {
  font-size: 14px;
  color: #4d4d4d;
  cursor: pointer;
}

.dachuShenCha .dachuShenCha_item:first-child {
  margin-right: 35px;
}

.showDetail {
  display: flex;
  justify-content: space-between;
}

.chaKanBox_right_select {
  display: flex;
  align-items: center;
}

.chaKanBox_right_select p {
  font-size: 14px;
  color: #444;
  margin-right: 15px;
}

.chaKanBox_left {
  width: 58%;
  margin-right: 3%;
  height: calc(100vh - 250px);
}

.chaKanBox_right {
  width: 39%;
}

.chaKanBox_right_item {
  margin-bottom: 20px;
}

.chaKanBox_right_item_textarea {
  width: 100%;
}

.shenchaItem {
  display: flex;
  align-items: center;
}

.shenchaItem p {
  width: 230px;
  font-size: 14px;
  color: #444;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
}

.shenChaTanKuang .el-dialog {
  width: 500px;
}

.shenchaItem_item_textarea {
  width: 100%;
}

.shenchaItem_item_noFlex p {
  font-size: 14px;
  color: #444;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
}

.shenchaItem_small {
  margin-top: 20px;
}

.shenchaItem_small p {
  width: 100px;
}

.shenchaItem_item_input {
  width: 260px;
}

.el-tree-node__label {
  margin-left: 10px;
}

.redText {
  color: red;
}

.bgFujian {
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.fujianTitle {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
}

.fujianContent {
  margin-left: 30px;
  background: #f5f8fa;
  width: 90%;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fujianName {
  font-size: 14px;
  font-weight: bold;
  color: #606266;
  cursor: pointer;
  margin-right: 20px;
  display: flex;
  align-items: center;
  width: 80%;
}

.fujianName .fujianNamePdf {
  margin: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.fujianName .icon {
  display: block;
  font-size: 20px;
  margin-right: 10px;
  color: #409eff;
}

.isHover {
  color: #409eff;
  font-size: 13px;
  width: 50px;
}

.isHover span {
  padding: 0px 3px;
  margin: 3px 5px 3px 0;
  cursor: pointer;
  display: block;
  float: left;
}

.chaKanBox_right_header {
  margin-top: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  padding: 30px 30px 20px;
  border-bottom: 1px solid #e4e4e4;
  .header {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .export {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: #737373;
    img {
      width: 12px;
      margin-right: 3px;
    }
  }
}

.chaKanBox_right_adviceList {
  margin-top: 10px;
  .chaKanBox_right_adviceList_item {
    padding: 20px 30px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    border-bottom: 1px solid #e4e4e4;
    .situation {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      .msg {
        margin-top: 10px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #8c8c8c;
      }
    }
    .other {
      text-align: right;
      .date {
        height: 18px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 18px;
        color: #999999;
      }
      .delete {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        //   margin-top: 12px;
        color: #f92828;
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>